<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Drawing</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        const points = [];
        let triangles = [];
        let dragging = false;
        let offsetX, offsetY;

        canvas.addEventListener('click', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            if (points.length < 3) {
                drawCircle(x, y);
                points.push({ x, y });

                if (points.length === 3) {
                    setTimeout(() => {
                        drawTriangle(points);
                        triangles.push([...points]);
                        points.length = 0;
                    }, 100);
                }
            }
        });

        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            for (const triangle of triangles) {
                if (isPointInTriangle({ x, y }, triangle)) {
                    dragging = true;
                    offsetX = x - triangle[0].x;
                    offsetY = y - triangle[0].y;
                    break;
                }
            }
        });

        canvas.addEventListener('mousemove', (e) => {
            if (dragging) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                ctx.clearRect(0, 0, canvas.width, canvas.height);
                triangles.forEach((triangle) => {
                    drawTriangle(triangle);
                });

                const dx = x - offsetX;
                const dy = y - offsetY;
                const newTriangle = [
                    { x: dx, y: dy },
                    { x: dx + (triangles[0][1].x - triangles[0][0].x), y: dy + (triangles[0][1].y - triangles[0][0].y) },
                    { x: dx + (triangles[0][2].x - triangles[0][0].x), y: dy + (triangles[0][2].y - triangles[0][0].y) }
                ];
                drawTriangle(newTriangle);
            }
        });

        canvas.addEventListener('mouseup', () => {
            dragging = false;
        });

        function drawCircle(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, Math.PI * 2, true);
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        function drawTriangle(points) {
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            ctx.lineTo(points[1].x, points[1].y);
            ctx.lineTo(points[2].x, points[2].y);
            ctx.closePath();
            ctx.fillStyle = 'red';
            ctx.fill();
        }

        function isPointInTriangle(pt, triangle) {
            const [a, b, c] = triangle;

            const v0 = [c.x - a.x, c.y - a.y];
            const v1 = [b.x - a.x, b.y - a.y];
            const v2 = [pt.x - a.x, pt.y - a.y];

            const dot00 = v0[0] * v0[0] + v0[1] * v0[1];
            const dot01 = v0[0] * v1[0] + v0[1] * v1[1];
            const dot02 = v0[0] * v2[0] + v0[1] * v2[1];
            const dot11 = v1[0] * v1[0] + v1[1] * v1[1];
            const dot12 = v1[0] * v2[0] + v1[1] * v2[1];

            const invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
            const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
            const v = (dot00 * dot12 - dot01 * dot02) * invDenom;

            return (u >= 0) && (v >= 0) && (u + v < 1);
        }
    </script>
</body>
</html>
